<script setup>

import {AddIcon, LinkIcon, ScreencastIcon, Setting1Icon} from "tdesign-icons-vue-next";
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";

const Route = useRoute()
const Router = useRouter()
// 连接窗口显示状态
const isNewLinkDialogVisible = ref(false)
// 新建库对话框
const addPoolDialogVisiable = ref(false)

// 建立连接
const newLink = () => {

}

// 新增数据库
const addPool = () => {
  Router.push('/addpool')
}

// 新增数据表
const addScheme = () => {
  Router.push('/addscheme')
}

// 所有连接数据
const linkItems = ref([
  {
    label: 'cert',
    type: 'link',
    children: [
      {
        label: 'sys',
        type: 'pool',
        children: [
          {
            label: "sys_config",
            value: '111',
            type: 'scheme'
          }
        ]
      }
    ],
  }
]);

// 点击下来菜单
const clickDropdown = (e) => {
  // console.log(e)
  if (e.value === 'firewall') {
    Router.push('/firewall')
  }
}

</script>

<template>
  <!--  连接对话框-->
  <t-dialog :footer="false" :closeBtn="true" placement="center" v-model:visible="isNewLinkDialogVisible">
    <t-form requiredMark labelAlign="left" resetType="initial">
      <t-form-item label="连接名" name="linkName">
        <t-input/>
      </t-form-item>
      <t-form-item label="主机" name="host">
        <t-input/>
      </t-form-item>
      <t-form-item label="端口" name="port">
        <t-input/>
      </t-form-item>
      <t-form-item label="用户名" name="userName">
        <t-input/>
      </t-form-item>
      <t-form-item label="密码" name="password">
        <t-input/>
      </t-form-item>

      <t-row>
        <t-col :span="3">
          <t-button theme="success">
            <template #icon>
              <LinkIcon/>
            </template>
            测试连接
          </t-button>
        </t-col>
        <t-col :span="3">

        </t-col>
        <t-col :span="3">

        </t-col>
        <t-col :span="3">
          <t-button theme="primary" type="submit">确定</t-button>
        </t-col>
      </t-row>

    </t-form>
  </t-dialog>

  <!--  新建数据库对话框-->
  <t-dialog :footer="false" :closeBtn="true" placement="center" v-model:visible="addPoolDialogVisiable">
    <t-form requiredMark labelAlign="left" resetType="initial">

      <t-form-item label="选择连接" name="linkName">
        <t-select
            placeholder="请选择"
            :popup-props="{ overlayClassName: 'tdesign-demo-select__overlay-option' }"
        >
          <t-option v-for="(link,index) in linkItems" :key="index"
                    :value="link.label"
                    :label="link.label">
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="数据库名" name="poolName">
        <t-input/>
      </t-form-item>


      <t-row>
        <t-col :span="3">

        </t-col>
        <t-col :span="3">

        </t-col>
        <t-col :span="3">

        </t-col>
        <t-col :span="3">
          <t-button theme="primary" type="submit">确定</t-button>
        </t-col>
      </t-row>

    </t-form>
  </t-dialog>
  <t-header>


    <t-head-menu theme="light" :value="Route.path" height="120px">
      <template #logo>
        <img width="136" @click="() => {
            Router.push('/')
        }" class="logo" style="height: 100%" src="/logo.svg" alt="logo" />
      </template>
      <t-menu-item>
        <t-button theme="primary" @click="isNewLinkDialogVisible = true">
          <template #icon>
            <LinkIcon/>
          </template>
          连接
        </t-button>
      </t-menu-item>

      <t-menu-item>
        <t-button theme="primary" @click="addPoolDialogVisiable = true">
          <template #icon>
            <AddIcon/>
          </template>
          新增数据库
        </t-button>
      </t-menu-item>
      <t-menu-item>
        <t-button theme="primary" @click="addScheme">
          <template #icon>
            <AddIcon/>
          </template>
          新增数据表
        </t-button>
      </t-menu-item>

      <t-menu-item>
          <t-button theme="primary" @click="() => {
              Router.push('/API')
          }">
            <template #icon>
              <LinkIcon />
            </template>
            API
          </t-button>
      </t-menu-item>


      <t-menu-item>
        <t-dropdown
            :options="[{ content: '防火墙', value: 'firewall' }]"
            :onClick="clickDropdown"
        >
          <t-button theme="primary">
            <template #icon>
              <Setting1Icon/>
            </template>
            系统设置
          </t-button>
        </t-dropdown>
      </t-menu-item>

      <t-menu-item>
        <t-button theme="primary" @click="() => {
            Router.push('/total')
        }">
          <template #icon>
            <ScreencastIcon/>
          </template>
          监控
        </t-button>
      </t-menu-item>


    </t-head-menu>

  </t-header>
</template>

<style scoped>
.t-head-menu .t-menu__item {
  margin: 0 var(--td-comp-paddingLR-l) !important;
  padding: 0 !important;
}
</style>
